<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="/layout/_css.jsp"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- <table id="table"></table> -->
		<div class="row">
			<div class="col-sm-12">
				  <div class="ibox float-e-margins">
				  	 <div class="ibox-title">
				  	 	<h5>餐厅订单列表</h5>
				  	 </div>
				  	 <div class="ibox-content">
				  	 	<table id="table"></table>
				  	 	  
				  	 </div>
				  </div>
			</div>
		</div>
	</div>
</body>
<jsp:include page="/layout/_script.jsp"/>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.js"></script>
<script>
$('#table').bootstrapTable({
    url: '${ctx}/OrdersServlet/listAllOrders',
    columns: [
    	 {
        field: 'orderId',
        title: '订单编号',
        sortable:true
    },  {
        field: 'tableId',
        title: '桌名',
        sortable:true,
        formatter:function(v1){
        	if(v1==1){
        		return '玫瑰';
        	}else if(v1==2){
        		return '牡丹';
        	}else if(v1==3){
        		return '荷花';
        	}else if(v1==4){
        		return '兰花';
        	} 
        }
    }, {
        field: 'orderDate',
        title: '下单时间'
    }, {
        field: 'totalPrice',
        title: '总金额'
    }, {
        field: 'orderStatus',
        title: '状态',
        sortable:true,
        formatter:function(v2){
        	if(v2==0){
        		return '未结账';
        	}else if(v2==1){
        		return '已结账';
        	}
        }
        
    },{
    	field: 'caozuo',
        title: '操作',
        formatter:function(v1,v2,v3){
        	/* console.log(v1);
        	console.log(v2);
        	console.log(v3); */
        	return ['<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="btn btn-warning">结账</i>',
                '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="btn btn-danger">删除</i>',
                '</a>'].join('');
        },
        events:'caocuoEvents'
    }],
    pagination:true,
    pageSize:10,
    pageList:[5,10,20],
    search:true, 
    showRefresh:true,
    showColumns:true,
    clickToSelect:true,
    sidePagination:'server',
    rowStyle:function(v,index){
    	var classes = ['active', 'success', 'info', 'warning', 'danger'];
        
        return {}; 
    } 
});
window.caocuoEvents = {
        'click .like': function (e, value, row) {
        	  $.ajax({
  				url : '${pageContext.request.contextPath }/OrdersServlet/jiezhang',
  				type : 'post',
  				data :{"orderId":row.orderId},
  				success : function(r){
  				if(r){  
  					layer.msg("已结账");
  					$('#table').bootstrapTable('refresh');
  			 	}else{
  			 		layer.msg("结账失败");
  			 	}
  			} 
  			
  		});  
        },
         'click .remove': function (e, value, row) {
        	if(confirm('是否删除')){
        		 $.get('${ctx}/OrdersServlet/removeByIdJson',{'id':row['orderId']},function(r){
            		 if(r){
            			layer.msg('删除成功');
            			 $('#table').bootstrapTable('refresh');
            		 }else{
            			 layer.msg('删除失败');
            		 }
            	 });
        	}
        } 
    };

 
</script>
</html>